 <!--// <template>
   <router-view v-slot="{ Component }">
//     <keep-alive v-if="$route.meta.keep">
//       <component :is="Component" />
//     </keep-alive>
//     <component :is="Component" v-if="!$route.meta.keep" />
//   </router-view> 
// <router-view>
    
//   </router-view>
// </template>
// <script>
// export default {
//   setup() {

//   }
// }
// </script>
-->
<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script>
import { reactive, watch, toRefs } from 'vue'
import { useRoute, useRouter } from "vue-router"
export default {
  setup() {
    const state = reactive({
      includeList: ['me', 'myGift']
    })
    const route = useRoute()
    const router = useRouter()
    watch(() => route, (newVal, oldVal) => {
      if (newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1) {
        state.includeList.push(newVal.name);
        console.log(state.includeList);
      }
    },
      { deep: true }) // 开启深度监听
    return {
      ...toRefs(state)
    }
  }
}
</script>

